<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>按钮 - 在线演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" href="../layui/dist/css/layui.css" media="all">
  <link rel="stylesheet" href="../static/css/global.css" media="all">
  <link id="layuicss-laydate" rel="stylesheet"
        href="https://layui.itze.cn/layui/dist/css/modules/laydate/default/laydate.css?v=5.3.1" media="all">
  <link id="layuicss-layer" rel="stylesheet"
        href="https://layui.itze.cn/layui/dist/css/modules/layer/default/layer.css?v=3.5.1" media="all">
  <link id="layuicss-skincodecss" rel="stylesheet" href="https://layui.itze.cn/layui/dist/css/modules/code.css?v=2"
        media="all">
  <script
    src="https://partner.googleadservices.com/gampad/cookie.js?domain=layui.itze.cn&amp;callback=_gfp_s_&amp;client=ca-pub-1707583634195460"></script>
  <script src="https://pagead2.googlesyndication.com/pagead/managed/js/adsense/m202112060101/show_ads_impl.js"
          id="google_shimpl"></script>
  <script src="https://hm.baidu.com/hm.js?0f72e2f81e4a9d7e564487bb8957aca6"></script>
  <meta http-equiv="origin-trial"
        content="AxujKG9INjsZ8/gUq8+dTruNvk7RjZQ1oFhhgQbcTJKDnZfbzSTE81wvC2Hzaf3TW4avA76LTZEMdiedF1vIbA4AAABueyJvcmlnaW4iOiJodHRwczovL2ltYXNkay5nb29nbGVhcGlzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=">
  <meta http-equiv="origin-trial"
        content="Azuce85ORtSnWe1MZDTv68qpaW3iHyfL9YbLRy0cwcCZwVnePnOmkUJlG8HGikmOwhZU22dElCcfrfX2HhrBPAkAAAB7eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="A16nvcdeoOAqrJcmjLRpl1I6f3McDD8EfofAYTt/P/H4/AWwB99nxiPp6kA0fXoiZav908Z8etuL16laFPUdfQsAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="AxBHdr0J44vFBQtZUqX9sjiqf5yWZ/OcHRcRMN3H9TH+t90V/j3ENW6C8+igBZFXMJ7G3Pr8Dd13632aLng42wgAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="A88BWHFjcawUfKU3lIejLoryXoyjooBXLgWmGh+hNcqMK44cugvsI5YZbNarYvi3roc1fYbHA1AVbhAtuHZflgEAAAB2eyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IlRydXN0VG9rZW5zIiwiZXhwaXJ5IjoxNjUyNzc0NDAwLCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
  <meta http-equiv="origin-trial"
        content="A8FHS1NmdCwGqD9DwOicnHHY+y27kdWfxKa0YHSGDfv0CSpDKRHTQdQmZVPDUdaFWUsxdgVxlwAd6o+dhJykPA0AAACWeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <meta http-equiv="origin-trial"
        content="A8zdXi6dr1hwXEUjQrYiyYQGlU3557y5QWDnN0Lwgj9ePt66XMEvNkVWOEOWPd7TP9sBQ25X0Q15Lr1Nn4oGFQkAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <meta http-equiv="origin-trial"
        content="A4/Htern2udN9w3yJK9QgWQxQFruxOXsXL7cW60DyCl0EZFGCSme/J33Q/WzF7bBkVvhEWDlcBiUyZaim5CpFQwAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjQzMTU1MTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <meta http-equiv="origin-trial"
        content="AxujKG9INjsZ8/gUq8+dTruNvk7RjZQ1oFhhgQbcTJKDnZfbzSTE81wvC2Hzaf3TW4avA76LTZEMdiedF1vIbA4AAABueyJvcmlnaW4iOiJodHRwczovL2ltYXNkay5nb29nbGVhcGlzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzVGhpcmRQYXJ0eSI6dHJ1ZX0=">
  <meta http-equiv="origin-trial"
        content="Azuce85ORtSnWe1MZDTv68qpaW3iHyfL9YbLRy0cwcCZwVnePnOmkUJlG8HGikmOwhZU22dElCcfrfX2HhrBPAkAAAB7eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="A16nvcdeoOAqrJcmjLRpl1I6f3McDD8EfofAYTt/P/H4/AWwB99nxiPp6kA0fXoiZav908Z8etuL16laFPUdfQsAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="AxBHdr0J44vFBQtZUqX9sjiqf5yWZ/OcHRcRMN3H9TH+t90V/j3ENW6C8+igBZFXMJ7G3Pr8Dd13632aLng42wgAAACBeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiVHJ1c3RUb2tlbnMiLCJleHBpcnkiOjE2NTI3NzQ0MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
  <meta http-equiv="origin-trial"
        content="A88BWHFjcawUfKU3lIejLoryXoyjooBXLgWmGh+hNcqMK44cugvsI5YZbNarYvi3roc1fYbHA1AVbhAtuHZflgEAAAB2eyJvcmlnaW4iOiJodHRwczovL2dvb2dsZS5jb206NDQzIiwiZmVhdHVyZSI6IlRydXN0VG9rZW5zIiwiZXhwaXJ5IjoxNjUyNzc0NDAwLCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlfQ==">
  <meta http-equiv="origin-trial"
        content="A/OOU4XAFfeAV4kM4+W9WBwNAHqq/bvtrRcJ1wpnNyO/i076BSUy1d14l2kBEgVmEuvxojSpD23172C6hBg2AQYAAACWeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjM0MDgzMTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <meta http-equiv="origin-trial"
        content="AwrB+XVH/KV6HfZNVtSEqlUJi3yUbtCp0/TJRj+38NDIw19/9P1h7ECTtdLdhIzG0Bsl4n/0rVmttJtGUCcewgAAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjM0MDgzMTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <meta http-equiv="origin-trial"
        content="Ax15QOERqai2A5XWrDY38Eg07xh2T0pkhpDPJuDlxr7D2Ka8wHvklgK7tTPZOnT+8H31lwHto5JpvYV8jRn1WgIAAACceyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXRhZ3NlcnZpY2VzLmNvbTo0NDMiLCJmZWF0dXJlIjoiQ29udmVyc2lvbk1lYXN1cmVtZW50IiwiZXhwaXJ5IjoxNjM0MDgzMTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZSwiaXNUaGlyZFBhcnR5Ijp0cnVlLCJ1c2FnZSI6InN1YnNldCJ9">
  <link rel="preload" href="https://adservice.google.com/adsid/integrator.js?domain=layui.itze.cn" as="script">
  <script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=layui.itze.cn"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">


  <div class="layui-header header header-demo" autumn="">
    <div class="layui-fluid">
      <a class="logo" href="../index.html">
        <img src="../static/images/layui/logo.png" alt="layui">
      </a>
      <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"><select lay-search=""
                                                                                                     lay-filter="component">
        <option value="">搜索组件模块</option>
        <option value="element/layout.html">grid 栅格布局</option>
        <option value="element/layout.html#admin">layout admin 布局</option>
        <option value="element/color.html">color 颜色</option>
        <option value="element/icon.html">iconfont 字体图标</option>
        <option value="base/element.html#css">font 字体大小 颜色</option>
        <option value="element/anim.html">animation 动画</option>
        <option value="element/button.html">button 按钮</option>
        <option value="element/form.html">form 表单组</option>
        <option value="element/form.html#input">input 输入框</option>
        <option value="element/form.html#select">select 下拉选择框</option>
        <option value="element/form.html#checkbox">checkbox 复选框</option>
        <option value="element/form.html#switch">switch 开关</option>
        <option value="element/form.html#radio">radio 单选框</option>
        <option value="element/form.html#textarea">textarea 文本域</option>
        <option value="element/nav.html">nav 导航菜单</option>
        <option value="element/menu.html">menu 基础通用菜单</option>
        <option value="element/nav.html#breadcrumb">breadcrumb 面包屑</option>
        <option value="element/tab.html">tabs 选项卡</option>
        <option value="element/progress.html">progress 进度条</option>
        <option value="element/panel.html">panel 面板 / card</option>
        <option value="element/collapse.html">collapse 折叠面板/手风琴</option>
        <option value="element/table.html">table 表格元素</option>
        <option value="element/badge.html">badge 徽章</option>
        <option value="element/timeline.html">timeline 时间线</option>
        <option value="element/auxiliar.html#blockquote">blockquote 引用块</option>
        <option value="element/auxiliar.html#fieldset">fieldset 字段集</option>
        <option value="element/auxiliar.html#hr">hr 分割线</option>
        <option value="modules/layer.html">layer 弹出层/弹窗综合</option>
        <option value="modules/laydate.html">laydate 日期时间选择器</option>
        <option value="modules/laypage.html">laypage 分页</option>
        <option value="modules/laytpl.html">laytpl 模板引擎</option>
        <option value="modules/table.html">table 数据表格</option>
        <option value="modules/form.html">form 表单模块</option>
        <option value="modules/upload.html">upload 文件/图片上传</option>
        <option value="modules/dropdown.html">dropdown 下拉菜单</option>
        <option value="modules/dropdown.html#contextmenu">contextmenu 右键菜单</option>
        <option value="modules/transfer.html">transfer 穿梭框</option>
        <option value="modules/tree.html">tree 树形菜单</option>
        <option value="modules/colorpicker.html">colorpicker 颜色选择器</option>
        <option value="modules/element.html">element 常用元素操作</option>
        <option value="modules/slider.html">slider 滑块</option>
        <option value="modules/rate.html">rate 评分</option>
        <option value="modules/carousel.html">carousel 轮播/跑马灯</option>
        <option value="modules/layedit.html">layedit 富文本编辑器</option>
        <option value="modules/flow.html">flow 信息流/图片懒加载</option>
        <option value="modules/util.html">util 工具集</option>
        <option value="modules/code.html">code 代码文本行修饰</option>
        <option value="/layim/">layim</option>
        <option value="/layuiadmin/">layuiadmin</option>
      </select>
        <div class="layui-form-select">
          <div class="layui-select-title"><input type="text" placeholder="搜索组件模块" value="" class="layui-input"><i
            class="layui-edge"></i></div>
          <dl class="layui-anim layui-anim-upbit">
            <dd lay-value="" class="layui-select-tips">搜索组件模块</dd>
            <dd lay-value="element/layout.html" class="">grid 栅格布局</dd>
            <dd lay-value="element/layout.html#admin" class="">layout admin 布局</dd>
            <dd lay-value="element/color.html" class="">color 颜色</dd>
            <dd lay-value="element/icon.html" class="">iconfont 字体图标</dd>
            <dd lay-value="base/element.html#css" class="">font 字体大小 颜色</dd>
            <dd lay-value="element/anim.html" class="">animation 动画</dd>
            <dd lay-value="element/button.html" class="">button 按钮</dd>
            <dd lay-value="element/form.html" class="">form 表单组</dd>
            <dd lay-value="element/form.html#input" class="">input 输入框</dd>
            <dd lay-value="element/form.html#select" class="">select 下拉选择框</dd>
            <dd lay-value="element/form.html#checkbox" class="">checkbox 复选框</dd>
            <dd lay-value="element/form.html#switch" class="">switch 开关</dd>
            <dd lay-value="element/form.html#radio" class="">radio 单选框</dd>
            <dd lay-value="element/form.html#textarea" class="">textarea 文本域</dd>
            <dd lay-value="element/nav.html" class="">nav 导航菜单</dd>
            <dd lay-value="element/menu.html" class="">menu 基础通用菜单</dd>
            <dd lay-value="element/nav.html#breadcrumb" class="">breadcrumb 面包屑</dd>
            <dd lay-value="element/tab.html" class="">tabs 选项卡</dd>
            <dd lay-value="element/progress.html" class="">progress 进度条</dd>
            <dd lay-value="element/panel.html" class="">panel 面板 / card</dd>
            <dd lay-value="element/collapse.html" class="">collapse 折叠面板/手风琴</dd>
            <dd lay-value="element/table.html" class="">table 表格元素</dd>
            <dd lay-value="element/badge.html" class="">badge 徽章</dd>
            <dd lay-value="element/timeline.html" class="">timeline 时间线</dd>
            <dd lay-value="element/auxiliar.html#blockquote" class="">blockquote 引用块</dd>
            <dd lay-value="element/auxiliar.html#fieldset" class="">fieldset 字段集</dd>
            <dd lay-value="element/auxiliar.html#hr" class="">hr 分割线</dd>
            <dd lay-value="modules/layer.html" class="">layer 弹出层/弹窗综合</dd>
            <dd lay-value="modules/laydate.html" class="">laydate 日期时间选择器</dd>
            <dd lay-value="modules/laypage.html" class="">laypage 分页</dd>
            <dd lay-value="modules/laytpl.html" class="">laytpl 模板引擎</dd>
            <dd lay-value="modules/table.html" class="">table 数据表格</dd>
            <dd lay-value="modules/form.html" class="">form 表单模块</dd>
            <dd lay-value="modules/upload.html" class="">upload 文件/图片上传</dd>
            <dd lay-value="modules/dropdown.html" class="">dropdown 下拉菜单</dd>
            <dd lay-value="modules/dropdown.html#contextmenu" class="">contextmenu 右键菜单</dd>
            <dd lay-value="modules/transfer.html" class="">transfer 穿梭框</dd>
            <dd lay-value="modules/tree.html" class="">tree 树形菜单</dd>
            <dd lay-value="modules/colorpicker.html" class="">colorpicker 颜色选择器</dd>
            <dd lay-value="modules/element.html" class="">element 常用元素操作</dd>
            <dd lay-value="modules/slider.html" class="">slider 滑块</dd>
            <dd lay-value="modules/rate.html" class="">rate 评分</dd>
            <dd lay-value="modules/carousel.html" class="">carousel 轮播/跑马灯</dd>
            <dd lay-value="modules/layedit.html" class="">layedit 富文本编辑器</dd>
            <dd lay-value="modules/flow.html" class="">flow 信息流/图片懒加载</dd>
            <dd lay-value="modules/util.html" class="">util 工具集</dd>
            <dd lay-value="modules/code.html" class="">code 代码文本行修饰</dd>
            <dd lay-value="/layim/" class="">layim</dd>
            <dd lay-value="/layuiadmin/" class="">layuiadmin</dd>
          </dl>
        </div>
        <i class="layui-icon layui-icon-search"></i></div>
      <div class="layui-hide-xs site-notice"></div>

      <ul class="layui-nav" id="LAY_NAV_TOP">
        <li class="layui-nav-item ">
          <a href="../doc/index.html">文档</a>
        </li>
        <li class="layui-nav-item layui-this">
          <a href="index.html">示例</a>
        </li>

        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>-->
            周边
            <i class="layui-icon layui-icon-down layui-nav-more"></i></a>
          <dl class="layui-nav-child layui-nav-child-c">
            <dd class="layui-hide-sm layui-show-xs" lay-unselect="">
              <a href="javascript:;" target="_blank" rel="nofollow">问题反馈</a>
              <hr>
            </dd>

            <dd lay-unselect=""><a href="../alone.html" target="_blank" lay-unselect="">独立组件</a></dd>
            <dd lay-unselect=""><a href="../extend/index.html" target="_blank">扩展组件</a></dd>
          </dl>
        </li>


        <span class="layui-nav-bar"></span></ul>
    </div>
  </div>

  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">

      <ul class="layui-nav layui-nav-tree site-demo-nav">

        <li class="layui-nav-item layui-nav-itemed">
          <a class="javascript:;" href="javascript:;">演示<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
          <dl class="layui-nav-child">
            <dd>
              <a href="index.html">调试预览</a>
            </dd>
          </dl>
        </li>

        <li class="layui-nav-item layui-nav-itemed">
          <a class="javascript:;" href="javascript:;">布局<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
          <dl class="layui-nav-child">
            <dd class="">
              <a href="grid.html">栅格</a>
            </dd>
            <dd class="">
              <a href="admin.html">框架</a>
            </dd>
          </dl>
        </li>

        <li class="layui-nav-item layui-nav-itemed">
          <a class="javascript:;" href="javascript:;">基本元素<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
          <dl class="layui-nav-child">
            <dd class="layui-this">
              <a href="">按钮</a>
            </dd>
            <dd class="">
              <a href="form.html">表单</a>
            </dd>
            <dd class="">
              <a href="nav.html">导航 / 面包屑</a>
            </dd>
            <dd class="">
              <a href="menu.html">基础菜单</a>
            </dd>
            <dd class="">
              <a href="tab.html">选项卡</a>
            </dd>
            <dd class="">
              <a href="progress.html">进度条</a>
            </dd>
            <dd class="">
              <a href="panel.html">面板</a>
            </dd>
            <dd class="">
              <a href="badge.html">徽章</a>
            </dd>
            <dd class="">
              <a href="timeline.html">时间线</a>
            </dd>
            <dd class="">
              <a href="table-element.html">静态表格</a>
            </dd>
            <dd class="">
              <a href="anim.html">动画</a>
            </dd>
            <dd class="">
              <a href="auxiliar.html">辅助元素</a>
            </dd>
          </dl>
        </li>

        <li class="layui-nav-item layui-nav-itemed">
          <a class="javascript:;" href="javascript:;">组件示例<i class="layui-icon layui-icon-down layui-nav-more"></i></a>
          <dl class="layui-nav-child">
            <dd class="">
              <a href="layer.html">
                弹出层
              </a>
            </dd>
            <dd class="">
              <a href="laydate.html">
                日期与时间选择
              </a>
            </dd>
            <dd class="">
              <a href="table.html">
                数据表格
              </a>
            </dd>
            <dd class="">
              <a href="laypage.html">
                分页
              </a>
            </dd>
            <dd class="">
              <a href="dropdown.html">
                下拉菜单
              </a>
            </dd>
            <dd class="">
              <a href="upload.html">
                文件上传
              </a>
            </dd>
            <dd class="">
              <a href="transfer.html">
                穿梭框
              </a>
            </dd>

            <dd class="">
              <a href="tree.html">
                树形组件
              </a>
            </dd>
            <dd class="">
              <a href="colorpicker.html">
                颜色选择器
              </a>
            </dd>
            <dd class="">
              <a href="slider.html">
                滑块
              </a>
            </dd>
            <dd class="">
              <a href="rate.html">
                评分
              </a>
            </dd>
            <dd class="">
              <a href="carousel.html">
                轮播
              </a>
            </dd>
            <dd class="">
              <a href="laytpl.html">
                模板引擎
              </a>
            </dd>
            <dd class="">
              <a href="flow.html">
                流加载
              </a>
            </dd>
            <dd class="">
              <a href="util.html">
                工具模块
              </a>
            </dd>
            <dd class="">
              <a href="code.html">
                文本行修饰
              </a>
            </dd>
          </dl>
        </li>

        <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
        <span class="layui-nav-bar" style="top: 55px; height: 0px; opacity: 0;"></span></ul>

    </div>
  </div>
  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
      <li class="layui-this">预览</li>
      <li>查看代码</li>
      <li>帮助</li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">


      <div class="layui-tab-item layui-show">
        <div class="layui-main">
          <div id="LAY_preview">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>按钮主题</legend>
            </fieldset>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
              <button type="button" class="layui-btn">默认按钮</button>
              <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
              <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
              <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
              <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
            </div>

            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-primary layui-border">原始按钮</button>
              <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
              <button class="layui-btn layui-btn-primary layui-border-blue">百搭按钮</button>
              <button class="layui-btn layui-btn-primary layui-border-orange">暖色按钮</button>
              <button class="layui-btn layui-btn-primary layui-border-red">警告按钮</button>
              <button class="layui-btn layui-btn-primary layui-border-black">深色按钮</button>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>按钮尺寸</legend>
            </fieldset>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
              <button type="button" class="layui-btn">默认按钮</button>
              <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
              <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
            </div>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
              <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
              <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
            </div>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
              <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
            </div>

            <div style="width: 370px; margin: 0;">
              <button type="button" class="layui-btn layui-btn-fluid">流体按钮（即宽度最大化适应）</button>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>灵活的图标按钮（更多图标请阅览：文档-图标）</legend>
            </fieldset>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn"><i class="layui-icon"></i></button>
            </div>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
            </div>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>

              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>

              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>还可以是圆角按钮</legend>
            </fieldset>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
              <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
              <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
              <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
              <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>风格混搭的按钮</legend>
            </fieldset>

            <div class="layui-btn-container">
              <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
              <a href="../doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
              <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除
              </button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享
              </button>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>按钮组</legend>
            </fieldset>

            <div class="layui-btn-group">
              <button type="button" class="layui-btn">增加</button>
              <button type="button" class="layui-btn ">编辑</button>
              <button type="button" class="layui-btn">删除</button>
            </div>
            <div class="layui-btn-group">
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
              <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
            </div>
            <div class="layui-btn-group">
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>
              </button>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>按钮容器</legend>
            </fieldset>
            <div class="layui-btn-container">
              <button type="button" class="layui-btn">按钮一</button>
              <button type="button" class="layui-btn">按钮二</button>
              <button type="button" class="layui-btn">按钮三</button>
            </div>
            <div class="layui-btn-container">
              <button type="button" class="layui-btn">按钮一</button>
              <button type="button" class="layui-btn">按钮二</button>
              <button type="button" class="layui-btn">按钮三</button>
            </div>
          </div>


          <blockquote class="layui-elem-quote" style="margin-top: 30px;">
            更多我们未能呈现的示例，还有待您在阅读文档、以及不断使用的过程，去深入挖掘。
          </blockquote>
          <script async=""
                  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1707583634195460"
                  crossorigin="anonymous" data-checked-head="true"></script>
          <!-- GoogleAna-Fixed-Square -->
          <ins class="adsbygoogle" style="display: inline-block; width: 728px; height: 0px;"
               data-ad-client="ca-pub-1707583634195460" data-ad-slot="6404140215" data-adsbygoogle-status="done"
               data-ad-status="unfilled">
            <ins id="aswift_1_expand" tabindex="0" title="Advertisement" aria-label="Advertisement"
                 style="border: none; height: 0px; width: 728px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-table;">
              <ins id="aswift_1_anchor"
                   style="border: none; height: 0px; width: 728px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: block; overflow: hidden; opacity: 0;">
                <iframe id="aswift_1" name="aswift_1"
                        style="left: 0px; position: absolute; top: 0px; border: 0px; width: 728px; height: 0px;"
                        sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
                        width="728" height="0" frameborder="0"
                        src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1707583634195460&amp;output=html&amp;h=90&amp;slotname=6404140215&amp;adk=961242989&amp;adf=588412893&amp;pi=t.ma~as.6404140215&amp;w=728&amp;lmt=1635299608&amp;psa=1&amp;format=728x90&amp;url=https%3A%2F%2Flayui.itze.cn%2Fdemo%2Fbutton.html&amp;flash=32.0.0&amp;wgl=1&amp;dt=1640247004344&amp;bpp=1&amp;bdt=274&amp;idt=302&amp;shv=r20211207&amp;mjsv=m202112060101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;prev_fmts=0x0&amp;nras=1&amp;correlator=3319219903655&amp;frm=20&amp;pv=1&amp;ga_vid=883366681.1640247005&amp;ga_sid=1640247005&amp;ga_hid=1114084242&amp;ga_fc=0&amp;u_tz=480&amp;u_his=14&amp;u_h=864&amp;u_w=1536&amp;u_ah=824&amp;u_aw=1536&amp;u_cd=24&amp;dmc=8&amp;adx=215&amp;ady=1440&amp;biw=1447&amp;bih=693&amp;scr_x=0&amp;scr_y=0&amp;eid=31063825%2C31062931&amp;oid=2&amp;pvsid=1901867630763505&amp;pem=234&amp;tmod=537&amp;ref=https%3A%2F%2Flayui.itze.cn%2Fdemo%2Findex.html&amp;eae=0&amp;fc=1920&amp;brdim=0%2C96%2C0%2C96%2C1536%2C0%2C1536%2C728%2C1463%2C693&amp;vis=1&amp;rsz=%7C%7CaEebr%7C&amp;abl=CA&amp;pfx=0&amp;fu=0&amp;bc=31&amp;ifi=2&amp;uci=a!2&amp;btvi=1&amp;fsb=1&amp;xpc=aQx4Ky8dTT&amp;p=https%3A//layui.itze.cn&amp;dtd=313"
                        marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"
                        allowfullscreen="true" data-google-container-id="a!2"
                        data-google-query-id="CNCsq6C8-fQCFQvEfAodT8QM3Q" data-load-complete="true"></iframe>
              </ins>
            </ins>
          </ins>
          <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
          <div style="margin: 15px 0 100px; padding-bottom: 100px;">
            <!-- 通用-970*90 -->
            <!--<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="6835627838"></ins>-->
          </div>

        </div>
      </div>


      <div class="layui-tab-item">
<textarea class="layui-border-box site-demo-text site-demo-code" id="LAY_democode" spellcheck="false" readonly="">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Layui&lt;/title&gt;
  &lt;meta name="renderer" content="webkit"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  &lt;link rel="stylesheet" href="../layui/dist/css/layui.css"  media="all"&gt;
  &lt;!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --&gt;
&lt;/head&gt;
</textarea>
      </div>


      <div class="layui-tab-item">
        <div class="layui-main">
          <p>如果“查看代码”中的图标字符显示为：，那是正常的。具体在使用时，请参照【文档-图标字体】将其替换为对应的Unicode 字符。</p>


          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>相关</legend>
          </fieldset>
          <a class="layui-btn layui-btn-normal" href="../doc/element/button.html" target="_blank">按钮文档</a>
        </div>
      </div>


    </div>
  </div>

  <div class="layui-footer footer footer-demo"></div>
  <script>
    window.global = {
      pageType: 'demo'
      , preview: function () {
        var preview = document.getElementById('LAY_preview');
        return preview ? preview.innerHTML : '';
      }()
    };
  </script>
  <script async="" src="../pagead/js/adsbygoogle.js"></script>
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon layui-icon-spread-left"></i>
  </div>
  <div class="site-mobile-shade"></div>

  <script src="../layui/dist/layui.js"></script>
  <script>
    layui.config({
      base: '../static/lay/modules/layui/'
      , version: '1632428048260'
    }).use('global');
  </script>

  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0f72e2f81e4a9d7e564487bb8957aca6";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</div>

<ins class="adsbygoogle adsbygoogle-noablate" data-adsbygoogle-status="done" style="display: none !important;"
     data-ad-status="unfilled">
  <ins id="aswift_0_expand"
       style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-table;"
       tabindex="0" title="Advertisement" aria-label="Advertisement">
    <ins id="aswift_0_anchor"
         style="border: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: block;">
      <iframe id="aswift_0" name="aswift_0"
              style="left:0;position:absolute;top:0;border:0;width:0px;height:0px;"
              sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
              frameborder="0"
              src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-1707583634195460&amp;output=html&amp;adk=1812271804&amp;adf=3025194257&amp;lmt=1635299608&amp;plat=1%3A16777216%2C2%3A16777216%2C3%3A32%2C4%3A32%2C9%3A32904%2C16%3A8388608%2C17%3A32%2C24%3A32%2C25%3A32%2C30%3A1081344%2C32%3A32&amp;format=0x0&amp;url=https%3A%2F%2Flayui.itze.cn%2Fdemo%2Fbutton.html&amp;ea=0&amp;flash=32.0.0&amp;pra=5&amp;wgl=1&amp;dt=1640247004342&amp;bpp=2&amp;bdt=272&amp;idt=268&amp;shv=r20211207&amp;mjsv=m202112060101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;nras=1&amp;correlator=3319219903655&amp;frm=20&amp;pv=2&amp;ga_vid=883366681.1640247005&amp;ga_sid=1640247005&amp;ga_hid=1114084242&amp;ga_fc=0&amp;u_tz=480&amp;u_his=14&amp;u_h=864&amp;u_w=1536&amp;u_ah=824&amp;u_aw=1536&amp;u_cd=24&amp;dmc=8&amp;adx=-12245933&amp;ady=-12245933&amp;biw=1447&amp;bih=693&amp;scr_x=0&amp;scr_y=0&amp;eid=31063825%2C31062931&amp;oid=2&amp;pvsid=1901867630763505&amp;pem=234&amp;tmod=537&amp;ref=https%3A%2F%2Flayui.itze.cn%2Fdemo%2Findex.html&amp;eae=2&amp;fc=1920&amp;brdim=0%2C96%2C0%2C96%2C1536%2C0%2C1536%2C728%2C1463%2C693&amp;vis=1&amp;rsz=%7C%7Cs%7C&amp;abl=NS&amp;fu=32768&amp;bc=31&amp;ifi=1&amp;uci=a!1&amp;fsb=1&amp;dtd=288"
              marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"
              allowfullscreen="true" data-google-container-id="a!1" data-load-complete="true"></iframe>
    </ins>
  </ins>
</ins>
<ul class="layui-fixbar" style="bottom: 75px;">
  <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<iframe src="https://www.google.com/recaptcha/api2/aframe" width="0" height="0" style="display: none;"></iframe>
<div id="qb-sougou-search" style="display: none; opacity: 0;"><p>搜索</p>
  <p class="last-btn">复制</p>
  <iframe src=""></iframe>
</div>
</body>
</html>
